<template>
  <div class="container">
    <div class="blog">
      <div class="blogNav">
        <div class="nav-title">
          我的博客
        </div>
        <router-link to="/editBlog">
          <div class="nav-title">
            写博客
          </div>
        </router-link>
      </div>
      <div class="showBlog" v-bind:style="blogs.length > 0?'':'display:none;'">
        <div class="piece-blog" v-for="(blog, index) in blogs" v-bind:key="blog.id">
          <div class="title">
            # {{ blog.id }} {{ blog.title }}
          </div>
          {{ blog.writedate }}
          <div class="content">
            {{ blog.content }}
          </div>
          <button class="btn btn-info blog-edit" @click="editBlog(blog.id)">修改</button>
          <button class="btn btn-danger blog-del" @click="deleteBlog(blog.id, index)">删除</button>
        </div>
      </div>
      <div class="noBlogs" v-bind:style="blogs.length > 0?'display:none;':''">
        还没有博客哦,快去开始写吧 ~~~
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'selfBlog',
  data () {
    return {
      state: '',
      blogs: []
    }
  },
  mounted () {
    this.$http.post('/java_kunpeng/getBlog')
      .then((response) => {
        const json = response.data
        if (json.state === '0') {
          this.blogs = json.info
        } else {
          alert('error:' + json.msg)
        }
      })
      .catch((error) => {
        alert('error:' + error.toString())
      })
  },
  methods: {
    editBlog: function (id) {
      this.$router.push({name: 'editBlog', params: {blogid: id}})
    },
    deleteBlog: function (id, index) {
      this.$http.post('/java_kunpeng/delBlog', {
        id: id
      })
        .then((response) => {
          const json = response.data
          if (json.state === '0') {
            this.blogs.splice(index, 1)
          } else {
            alert('error:' + json.msg)
          }
        })
        .catch((error) => {
          alert(error.toString())
        })
    }
  }
}
</script>

<style scoped>
  .nav-title{
    font-size: 20px;
    font-weight: bold;
  }
</style>
